<template>
  <div class="rankList">
    <div class="back" v-if="isWechat===false">
      <button class="back_icon" @click="back"></button>
    </div>
    <div class="rankListTopBg" style="top:0px;">
      <img class="bg_top_img2" src="../assets/bg_rankList_top.jpg" alt="">
      <img class="bg_top_img1" src="https://hnres.etalk365.com/app/image/activity_pic/ranklist_top_1.jpg" alt="">
      <!-- <img class="ranklist_topText" src="../assets/ranklist_topText.png" alt="" @load="getBtnBoxTop"> -->
      <!-- <p class="goToRule" @click="checkRule">活动规则 > </p> -->
    </div>
    <div class="btnBox" style="top:0px;">
      <router-link to="/historyranklist">
        <img class="btn_historyRankList" src="../assets/btn_historyRankList.png">
      </router-link>
      <div class="imgBox">
        <!-- <img class="btnBoxImg" v-show="rankType === 'daily' " src="../assets/btn_dailyRankList_selected.png" alt="">
        <img class="btnBoxImg" @click="switchRankType('daily')" v-show="rankType === 'all' " src="../assets/btn_dailyRankList.png" alt="">
        <img class="btnBoxImg" @click="switchRankType('all')" v-show="rankType === 'daily' " src="../assets/btn_allRankList.png" alt="">
        <img class="btnBoxImg" v-show="rankType === 'all' " src="../assets/btn_allRankList_selected.png" alt=""> -->
        <img class="btnBoxImg btnAll" src="../assets/btn_all.png" alt="">
      </div>
      <div class="date">
        <!-- <p v-if="rankType === 'daily'">今天是{{nowDate}}号(22: 00停止答题 发放奖励)</p>
        <p v-if="rankType === 'all'">前三名即可领取荣誉奖杯</p> -->
        <p>活动已结束,前三名将获得荣誉奖杯</p>
      </div>
    </div>
    <div class="content" @touchstart="topBgSlideUp($event)" style="top:0px;">
      <div v-if="rankType === 'daily'" class="BOXBOX">
        <div class="rank_2nd">
          <!-- 第二名 -->
          <div class="Avatar_box" id="Avatar_box_2nd">
            <RankBox2Nd class="second" v-if="dailyRankList[1]" :player="dailyRankList[1]" :type="rankType"/>
          </div>
        </div>
        <div class="rank_1st">
          <!-- 第一名 -->
          <div class="Avatar_box" id="Avatar_box_1st">
            <RankBox1St v-if="dailyRankList[0]" :player="dailyRankList[0]" :type="rankType" class="first"></RankBox1St>
          </div>
        </div>
        <div class="rank_3rd">
          <!-- 第三名 -->
          <div class="Avatar_box" id="Avatar_box_3rd">
            <RankBox3Rd v-if="dailyRankList[2]" :player="dailyRankList[2]" :type="rankType" class="third"/>
          </div>
        </div>
      </div>
      <ul
        class="rankListUl"
        v-if="rankType === 'daily'"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li></li>
        <li v-if="index > 2" v-for="(item, index) of dailyRankList" :key="index">
          <div class="listItem">
            <RankListItem :index="index" :type="rankType" :player="item"></RankListItem>
          </div>
        </li>
      </ul>
      <div v-if="rankType === 'all'" class="BOXBOX">
        <div class="rank_2nd">
          <!-- 第二名 -->
          <div class="Avatar_box" id="Avatar_box_2nd">
            <RankBox2Nd :type="rankType" class="second" v-if="allRankList[1]" :player="allRankList[1]"/>
          </div>
        </div>
        <div class="rank_1st">
          <!-- 第一名 -->
          <div class="Avatar_box" id="Avatar_box_1st">
            <RankBox1St :type="rankType" v-if="allRankList[0]" :player="allRankList[0]" class="first"></RankBox1St>
          </div>
        </div>
        <div class="rank_3rd">
          <!-- 第三名 -->
          <div class="Avatar_box" id="Avatar_box_3rd">
            <RankBox3Rd :type="rankType" v-if="allRankList[2]" :player="allRankList[2]" class="third"/>
          </div>
        </div>
      </div>
      <ul
        class="rankListUl"
        v-if="rankType === 'all'"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li></li>
        <li v-if="index > 2" v-for="(item, index) of allRankList" :key="index">
          <div class="listItem">
            <RankListItem :type="rankType" :player="item" :index="index"></RankListItem>
          </div>
        </li>
      </ul>
    </div>
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut quick">
      <div class="myself" v-if="(dailyRankList.length > 0 || allRankList.length > 0) && beforTouch === false" v-show="baseInfo">
        <div class="listItem">
          <RankListItem :type="rankType" :player="mySelf" :index="1" :rankNumber="mySelf.rankNumber"></RankListItem>
        </div>
      </div>
    </transition>
    <div class="RankListBottom">
      <RankListBottom :baseInfo="baseInfo" :t="token" @toShowOff="toShowOff" :canStart="canStart"></RankListBottom>
    </div>
    <div class="showoff" v-if="showoff">
      <div class="showoffContent">
        <div class="showoffBgWrap">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX2">
          </div>
          <div class="bg_showoff_top">
            <p>分享得次数</p>
          </div>
          <div class="bg_showoff_bottom">
            <div style="height:0.6rem;"></div>
            <p style="color:#7a585c;font-size: 0.25rem;width:80%;">
              <ul>
                <li>1.每日首次分享可增加当日答题次数 2 次</li>
                <li class="lastLi">2.每邀请一位非Etalk学员参加活动,可增加 1 次基础挑战机会</li>
              </ul>
            </p>
            <div class="shareBtnWrap">
              <button v-if="isWechat===false" class="btn_shareFrineds" @click="getQart(0)"></button>
              <button v-if="isWechat===false" class="btn_shareFrinedsCircle" @click="getQart(1)"></button>
            </div>
            <span style="text-indent: 0.4rem;display: block;color:#7A585C;">已成功邀请好友:</span>
            <div class="myFriendsList">
              <div class="myFrinendsWrap">
                <ul>
                  <!-- <li></li> -->
                  <li v-for="(item, index) of myFriendList" :key="index">
                    <div class="listItem">
                      <myFriendsItem :player="item" :index="index + 1000"></myFriendsItem>
                    </div>
                  </li>
                  <li v-if="myFriendList.length===0" v-for="item in 3" :key="item">
                    <div class="unyaoqing">
                      <div class="unyaoqingAvatarItem"></div>
                      <span>待邀请</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showDom" id="qrcode" ref="qrimg" ></div>
      <canvas v-show="showDom" ref="finalyc" width="375" height="667"></canvas>
      <!-- <canvas v-show="showDom" ref="finalyc" width="750" height="800"></canvas> -->
      <!-- <img class="afterQuestionShowoff" src="../assets/sure_alert.png" alt=""> -->
    </div>
    <div class="showoff" v-if="noAnswerTimes">
      <div class="showoffContent">
        <div class="showoffBgWrap">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX2">
          </div>
          <div class="bg_showoff_top">
            <p>分享马上得次数</p>
          </div>
          <div class="bg_showoff_bottom bg_daily_share">
            <div style="height:0.9rem;"></div>
            <p style="color:#7a585c;font-size: 0.3rem;width:80%;">
              <img class="text_addTimesSoon" src="../assets/text_addTimesSoon.jpg" alt="">
            </p>
            <div class="shareBtnWrap shareBtnWrap2">
              <button v-if="isWechat===false" class="btn_shareFrineds" @click="getQart(0)"></button>
              <button v-if="isWechat===false" class="btn_shareFrinedsCircle" @click="getQart(1)"></button>
            </div>
            <!-- <div style="text-align:center;font-size:0.24rem;color:rgb(170, 138, 138);padding-top:0.1rem;">今日次数已用完</div> -->
          </div>
        </div>
      </div>
      <div v-show="showDom" id="qrcode" ref="qrimg" ></div>
      <canvas v-show="showDom" ref="finalyc" width="375" height="667"></canvas>
      <!-- <canvas v-show="showDom" ref="finalyc" width="750" height="800"></canvas> -->
      <!-- <img class="afterQuestionShowoff" src="../assets/sure_alert.png" alt=""> -->
    </div>
    <div class="weChatBg" v-if="weChatShowOff" @click="weChatShowOff=false">
      <img v-if="baseInfo.isShare === 1" src="../assets/weChatBg.png" alt="">
      <img v-else-if="baseInfo.isShare === 0" src="../assets/weChatFirstShare.png" alt="">
    </div>
  </div>
</template>

<script>
import {wxshare} from '../util/WXShare'
import {mapGetters} from 'vuex'
import GetToken from '../util/getToken'
import {InfiniteScroll, Indicator, Toast} from 'mint-ui'
import RankBox1St from '../components/RankBox1St'
import RankBox2Nd from '../components/RankBox2Nd'
import RankBox3Rd from '../components/RankBox3Rd'
import RankListItem from '../components/RankListItem'
import RankListBottom from '../components/RankListBottom'
import {getRankList, getMyFriends, checkMyselfRnak, checkIfShare, addTimesByShare, getUserInfo} from '../request/question'
import myFriendsItem from '../components/myFriendsItem'
import AppBradge from '../util/appBradge'
import QRCode from 'qrcodejs2'
export default {
  name: 'rankList',
  directives: {
    InfiniteScroll
  },
  components: {
    RankBox1St,
    RankBox2Nd,
    RankBox3Rd,
    RankListItem,
    RankListBottom,
    myFriendsItem
  },
  data () {
    return {
      msg: 'value',
      rankType: 'all',
      // dailyRankList: [1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 3, 5, 165, 1651, 651, 655, 1655, 1651, 6551, 651, 651, 651, 651, 651, 651, 56, 161, 651, 651, 651651651, 651, 651],
      slideUp: 0,
      opacity: 1,
      btnBoxTop: '',
      rate: '',
      beforTouch: true,
      moveStart: false,
      toptop: 0,
      dailyRankList: [],
      allRankList: [],
      page: 1,
      allTypePage: 1,
      showoff: false,
      myFriendList: [],
      imgBase64: '',
      showDom: false,
      mySelf: {},
      isWechat: false,
      weChatShowOff: false,
      nowDate: (new Date()).getMonth() + 1 + '月' + (new Date()).getDate(),
      loadList: false,
      noAnswerTimes: false,
      canStart: true
    }
  },
  computed: {
    ...mapGetters([
      'baseInfo',
      'token'
    ])
  },
  created () {
    // if (!this.token) {
    //   this.$router.push({name: 'SignUp', query: {fresh: 'yes'}})
    // }
  },
  mounted () {
    this.toptop = document.getElementsByTagName('li')[0].getBoundingClientRect().top
    if (this.token) {
      if (this.baseInfo) {
        this.getMyself(1)
      }
    } else if (this.$debugToken) {
      this.$store.dispatch('getToken', this.$debugToken)
      // getUserInfo({ tokenString: this.token }).then(data => {
      //   this.$store.dispatch('saveInfo', data)
      // })
      if (this.baseInfo) {
        this.getMyself(1)
      }
    } else {
      GetToken.getToken(this).then((data) => {
        this.$store.dispatch('getToken', data.tokenString)
        if (this.baseInfo) {
          this.getMyself(1)
        }
      })
    }
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
    setTimeout(() => {
      if (this.baseInfo) {
        if (this.baseInfo.answerTimes <= 0 && this.baseInfo.isShare * 1 === 0) {
          if (!this.isWechat) {
            this.noAnswerTimes = true
          }
        }
      }
    }, 500)
    if (!this.baseInfo) {
      this.canStart = false
    } else if (this.baseInfo.answerTimes <= 0) {
      this.canStart = false
    } else {
      this.canStart = true
    }
    wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg', this.successShare)
  },
  methods: {
    successShare () {
      checkIfShare({tokenString: this.token}).then(data => {
        if (data.isShare === 0) {
          addTimesByShare({tokenString: this.token}).then(data => {
            if (data > 0) {
              // msg = '分享成功,当日增加两次答题机会'
              getUserInfo({ tokenString: this.token }).then(data => {
                this.$store.dispatch('saveInfo', data)
                if (this.baseInfo.answerTimes <= 0) {
                  this.canStart = false
                } else {
                  this.canStart = true
                }
              })
            }
          })
        }
      })
    },
    checkRule () {
      this.$router.push({name: 'SignUp', query: {checkRule: 'yes'}})
    },
    getMyself (type) {
      checkMyselfRnak({tokenString: this.token, type: type}).then(data => {
        this.mySelf = Object.assign(data.answerInformation, data.userInformation[0])
        this.mySelf.rankNumber = data.rankNumber
      })
    },
    toShowOff () {
      if (this.isWechat) {
        this.weChatShowOff = true
        // Toast({
        //   message: '次数已用完,登陆Etalk APP邀请得次数',
        //   duration: 2000
        // })
      } else {
        if (this.baseInfo.isShare === 0) {
          this.noAnswerTimes = true
        } else {
          getMyFriends({tokenString: this.token}).then(data => {
            if (Number(data) === 0) {
              this.showoff = true
            } else if (data.recommendedInformation.length > 0) {
              this.myFriendList = []
              data.recommendedInformation.map((item1, index) => {
                data.recommendedUser.map((item2, index) => {
                  if (item1.uid === item2.personId) {
                    this.myFriendList.push(Object.assign(item1, item2))
                  }
                })
              })
              this.showoff = true
            }
          })
        }
      }
    },
    btnX2 () {
      this.showoff = false
      this.noAnswerTimes = false
    },
    back () {
      AppBradge.deleteWebView()
      // this.$router.push({name: 'SignUp', query: {look: 'yes'}})
    },
    loadMore () {
      if (this.page <= 5 && this.rankType === 'daily') {
        if (this.loadList) {
          return
        }
        this.loadList = true
        this.getDailyRankList()
      } else if (this.allTypePage <= 5 && this.rankType === 'all') {
        if (this.loadList) {
          return
        }
        this.loadList = true
        this.getAllRankList()
      }
    },
    getDailyRankList () {
      Indicator.open({
        text: '读取排名列表中...',
        spinnerType: 'fading-circle'
      })
      getRankList({tokenString: this.token, type: 0, page: this.page, size: 10}).then((data) => {
        this.loadList = false
        this.page++
        let rankInformationList = data.rankInformationList
        let userInformationList = data.userInformationList
        if (rankInformationList.length > 0) {
          rankInformationList.map((item, index) => {
            for (let i = 0; i < rankInformationList.length; i++) {
              if (userInformationList[i] && item.uid === userInformationList[i].personId) {
                Object.assign(item, userInformationList[i])
              }
            }
          })
        }
        this.dailyRankList = [...this.dailyRankList, ...rankInformationList]
        Indicator.close()
      })
    },
    getAllRankList () {
      Indicator.open({
        text: '读取排名列表中...',
        spinnerType: 'fading-circle'
      })
      getRankList({tokenString: this.token, type: 1, page: this.allTypePage, size: 10}).then((data) => {
        this.loadList = false
        this.allTypePage++
        let rankInformationList = data.rankInformationList
        let userInformationList = data.userInformationList
        if (rankInformationList.length > 0) {
          rankInformationList.map((item, index) => {
            for (let i = 0; i < rankInformationList.length; i++) {
              if (userInformationList[i] && item.uid === userInformationList[i].personId) {
                Object.assign(item, userInformationList[i])
              }
            }
          })
        }
        this.allRankList = [...this.allRankList, ...rankInformationList]
        Indicator.close()
      })
    },
    switchRankType (type) {
      this.rankType = type
      this.page = 1
      this.allRankList = []
      this.dailyRankList = []
      this.allTypePage = 1
      if (this.rankType === 'all') {
        this.loadMore()
        this.getMyself(1)
      } else if (this.rankType === 'daily') {
        this.loadMore()
        this.getMyself(0)
      }
    },
    drawAvatarImg (canvas, ctx, width, height, AvatarBgUrl, AvatarImgUrl, AvatarTop) {
      canvas.setAttribute('width', width + 'px')
      canvas.setAttribute('height', height + 'px')
      let AvatarImg = new Image()
      let AvatarBg = new Image()
      let Crown1ST = new Image()
      AvatarImg.src = AvatarImgUrl
      AvatarBg.src = AvatarBgUrl
      Crown1ST.src = AvatarTop
      AvatarBg.onload = () => {
        ctx.drawImage(AvatarBg, 0, height * 0.2, width, height * 0.8)
      }
      AvatarImg.onload = () => {
        ctx.beginPath()
        ctx.arc(width / 2, height / 2, height * 1, 0, 2 * Math.PI)
        ctx.clip()
        // ctx.clip() 之后 所有操作都会在这范围里面
        ctx.drawImage(AvatarImg, (width - height * 0.8) * 0.5, height * 0.2, height * 0.8, height * 0.8)
        Crown1ST.onload = () => {
          ctx.drawImage(Crown1ST, width / 2 - width * 0.3 / 2, 0, width * 0.3, width * 0.2)
        }
        Crown1ST.onerror = () => {
          console.log(123123)
        }
      }
    },
    topBgSlideUp (e) {
      let rankListTopBg = document.getElementsByClassName('rankListTopBg')[0]
      let bgTopImg1 = document.getElementsByClassName('bg_top_img1')[0]
      let content = document.getElementsByClassName('content')[0]
      let btnBox = document.getElementsByClassName('btnBox')[0]
      let firstLi = document.getElementsByTagName('li')[0]
      // const target = e.currentTarget
      // firstLi.getBoundingClientRect().top
      let y = e.targetTouches[0].clientY
      // console.log(firstLi.getBoundingClientRect().top)
      content.ontouchmove = (e) => {
        let yMove = e.targetTouches[0].clientY
        if (yMove - y < 0 && rankListTopBg.style.top === '0px') {
          if (this.beforTouch === false) { return }
          bgTopImg1.style.transition = 'all 1s'
          rankListTopBg.style.transition = 'all 0.3s'
          content.style.transition = 'all 0.3s'
          btnBox.style.transition = 'all 0.3s'
          rankListTopBg.style.top = '-2.58rem'
          content.style.top = '-2.58rem'
          btnBox.style.top = '-2.58rem'
          this.beforTouch = false
          bgTopImg1.style.opacity = 0
        } else if (yMove - y > 0 && firstLi.getBoundingClientRect().top * 2 + 50 >= this.toptop) {
          if (this.beforTouch) { return }
          this.beforTouch = true
          bgTopImg1.style.transition = 'all 0s'
          bgTopImg1.style.opacity = 1
          rankListTopBg.style.transition = 'all 0.3s'
          content.style.transition = 'all 0.3s'
          btnBox.style.transition = 'all 0.3s'
          rankListTopBg.style.top = '0px'
          content.style.top = '0px'
          btnBox.style.top = '0px'
        }
      }
    },
    getQart (shareType) { // 这个是点击分享
      /**
        auther: cmyh
        创建二维码
        之所以生成的二维码密度大，有俩点原因：
        内容过多。
        选择了高比例的错误修正。
        容错级别，可设置为：
        QRCode.CorrectLevel.L
        QRCode.CorrectLevel.M
        QRCode.CorrectLevel.Q
        QRCode.CorrectLevel.H
      **/
      // Indicator.open({
      //   text: '合成二维码中...',
      //   spinnerType: 'fading-circle'
      // })
      // Indicator.close()
      if (shareType === 0) {
        this.$store.dispatch('zhugeWxshareFriends', {})
      } else {
        this.$store.dispatch('zhugeWxshareFriendsQuan', {})
      }
      if (this.$data.imgBase64 !== '') {
        // Indicator.close()
        this.shareMethod(shareType)
      } else {
        let qrcode = new QRCode(document.getElementById('qrcode'), {
          width: 100, // 设置宽高
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.M
        })
        // https://metalk.etalk365.com/superwordfile/#/signup
        let shareUrl = 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97'
        qrcode.makeCode(shareUrl)
        let qrimg = this.$refs.qrimg.children[1]
        let bg = new Image()
        bg.src = require('../assets/shareHaibao.jpg') // require('../assets/shareHaibao.jpg') // 'https://hnres.etalk365.com/app/image/activity_pic/invitation.jpg'
        let codePromise = new Promise((resolve, reject) => {
          qrimg.onload = () => {
            resolve(1)
          }
          qrimg.onerror = () => {
            resolve(0)
          }
        })
        let bgPromise = new Promise((resolve, reject) => {
          bg.onload = () => {
            resolve(1)
          }
          bg.onerror = () => {
            resolve(0)
          }
        })
        Promise.all([codePromise, bgPromise]).then(data => {
          // Indicator.close()
          if (Number(data[0]) === 1) {
            this.composeQr(qrimg, bg, shareType)
          } else {
            this.composeQr(qrimg, bg, shareType)
          }
        })
      }
      // this.imgPreloadingAct()
    },
    composeQr (img, bg, shareType) {
      // 合成最终专属二维码图片
      try {
        let c = this.$refs.finalyc
        let ctx = c.getContext('2d')
        // let imgbg = this.$refs.qrbg
        ctx.drawImage(bg, 0, 0)
        ctx.fillStyle = '#fff'
        // ctx.fillRect(255, 1044, 240, 240)
        ctx.drawImage(img, 137, 532)
        // ctx.drawImage(img, 275, 437)
        this.$data.imgBase64 = c.toDataURL('image/jpeg')
        this.shareMethod(shareType)
      } catch (e) {
        console.log(e)
      }
    },
    shareMethod (shareType) {
      AppBradge.wxshare(shareType, this.$data.imgBase64).then((type) => {
        let msg = ''
        switch (type * 1) {
          case 0:
            msg = '分享成功'
            break
          case -1:
            msg = '发送失败'
            break
          case -2:
            msg = '您取消了'
            break
          case -3:
            msg = '发送失败'
            break
          case -4:
            msg = '授权失败'
            break
          case -5:
            msg = '微信不支持'
            break
        }
        if (type * 1 === 0) {
          checkIfShare({tokenString: this.token}).then(data => {
            if (data.isShare === 0) {
              addTimesByShare({tokenString: this.token}).then(data => {
                if (data > 0) {
                  msg = '分享成功,当日增加两次答题机会'
                  getUserInfo({ tokenString: this.token }).then(data => {
                    this.$store.dispatch('saveInfo', data)
                    if (this.baseInfo.answerTimes <= 0) {
                      this.canStart = false
                    } else {
                      this.canStart = true
                    }
                    this.noAnswerTimes = false
                    Toast({
                      message: msg,
                      duration: 1500
                    })
                  })
                }
              })
            } else {
              Toast({
                message: msg,
                duration: 1500
              })
            }
          })
        } else {
          Toast({
            message: msg,
            duration: 1500
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/ranklist';
.showoff{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  font-size: 0.3rem;
  .afterQuestionShowoff{
    position: absolute;
    font-size: 0;
    width: 80%;
    left: 10%;
    top: 45%;
    transform: translateY(-50%);
  }
  .btnX{
    position: absolute;
    right: 10%;
    transform: translateY(-110%);
    img{
      width:60%;
    }
  }
}
.bg_showoff_top{
  position: relative;
  z-index:2;
  height: 2rem;
  width: 100%;
  background: url('../assets/bg_result_top.png');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  font-size: 0.45rem;
  text-align: center;
  p{
    padding-top:0.9rem;
    font-weight: 600;
  }
}
.showoffContent{
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.showoffBgWrap{
  width:80%;
  margin-left: 10%;
}
.bg_showoff_bottom{
  position: relative;
  z-index:1;
  width: 94%;
  height: 6.8rem;
  left:3%;
  top:-0.5rem;
  background: white;
  border-radius: 0.3rem;
  overflow: hidden;
  p{
    width:85%;
    margin: 0 auto;
    padding: 0.2rem;
    background: #FFE2DE;
    border-radius: 0.3rem;
    box-shadow: 0 0.1rem 0 #FFBFCD;
  }
}
.bg_daily_share{
  height:4.2rem;
}
.shareBtnWrap{
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  margin-top: 0.4rem;
}
.shareBtnWrap2{
  margin-top: 0.7rem;
}
.btn_shareFrineds{
  background-image: url('../assets/btn_shareFriends.png')
}
.btn_shareFrinedsCircle{
  background-image: url('../assets/btn_shareFriendCircle.png')
}
.btn_shareFrineds,
.btn_shareFrinedsCircle{
  width:45%;
  height: 0.8rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.myFriendsList{
  // margin-top: 0.1rem;
  height: 2.8rem;
  overflow: scroll;
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  width: 80%;
  border-radius: 0.3rem;
  margin: 0px auto;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  span{
    display: block;
    text-indent: 0.2rem;
  }
}
.showoff{
  .listItem{
    margin-top: 0.1rem;
    background: white;
    margin-left: 3%;
    // margin-right: 0.23rem;
    // height: 0.9rem;
    // line-height: 0.35rem;
    border-radius: 0.45rem;
    width: 94%;
    height: 100%;
    .correctNumRnak{
      margin-left: 0.2rem;
    }
  }
}
.quick{
  animation-duration: 0.4s;
}
.unyaoqing{
  background: white;
  height: 0.8rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 0.1rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  .unyaoqingAvatarItem{
    width: 0.7rem;
    height: 0.7rem;
    // border:1px solid red;
    border-radius: 100%;
    margin-left: 0.5rem;
    margin-top: 0.05rem;
    background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  }
  span{
    font-size: 0.25rem;
    color: rgb(170, 138, 138);
  }
}
.myFrinendsWrap{
  li{
    height:0.85rem;
  }
}
.weChatBg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index:9999;
  img{
    width:90%;
    display: block;
    margin: 0 auto;
  }
}
.goToRule{
  position: fixed;
  font-size: 0.25rem;
  right: 0.2rem;
  top: 0.7rem;
  color: white;
}
.back_icon{
  z-index:1;
}
.btn_historyRankList{
  position: absolute;
  width: 1.15rem;
  display: block;
  right: 0;
  top: 0;
}
</style>
